<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>新增手牌</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			function onSelTYPE(){
				$('#selectTokenType').window('open');
			}
			
			
			function clearForm(){
				$("#token_no").val('');
				$("#token_type_name").val('');
				$("#token_type_id").val('');
				$("input[name='status'][value=${tokenFreeStatus}]").attr("checked",true);
			}
			
			$(function(){
				if('${result}' != null && '${result}' != ''){
					$.messager.alert('操作结果','${result}');
				}
			});
			
			function submitForm(){
				var flag = "false";
				$.ajax({
					url:'checkTokenNo.do',
					data:{'tokenNo':$.trim($("#token_no").val())},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						flag = data.toString();
					}
				});
				
				if(flag == 'true'){
					$.messager.alert('操作结果','手牌编号已存在','warning');
					return false;
				}
				
				$("#addTokenForm").submit();
			}
			
			function onReset(){
				$("#tokenTypeName").val('');
				$("#productNo").val('');
				$("#productName").val('');
			}
			
			function onQuery(){
				$('#tokenTypeTable').datagrid({
					url: '../tokenType/queryTokenType.do',
					pageNumber:1,				
					queryParams:{tokenTypeName:$("#tokenTypeName").val(),						
						productNo:$.trim($('#productNo').val()),
						productName:$.trim($('#productName').val())}
				});
			}
		</script>
	</head>
	
	<body>
		<div class="easyui-panel" title="新增手牌" fit="true">
			<div style="padding:10px 0 10px 60px; text-align: right;">
				<form name="addTokenForm" id="addTokenForm" method="post" action="addToken">
					<table  style="text-align: center; border:1px;width:400px;">
						<tr>
							<td align="right" style="height:28px;">手牌编号：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" 
	    							name="token_no" id="token_no" required="true" />
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">手牌类型 ：</td>
	    					<td align="left">
	    						<input class="easyui-validatebox" style="width:150px;" type="text" name="token_type_name" id="token_type_name" data-options="required:true" />
	    						<input type="hidden" name="token_type_id" id="token_type_id" />
	    						&nbsp;&nbsp;
	    						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSelTYPE()">选择</a>
	    					</td>
						</tr>
						
						<tr>
							<td align="right" style="height:28px;">状态：</td>
	    					<td align="left">
	    						<input type="radio" name="status" id="status" value="${tokenFreeStatus}" checked="checked"/>空闲
	    						&nbsp;&nbsp;&nbsp;&nbsp;
	    						<input type="radio" name="status" id="status" value="${tokenUsedStatus}" />占用
	    					</td>
						</tr>
					</table>
				</form>
			</div>
			
			<div style="margin-left:170px;padding:5px">
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    	</div>
		</div>
		
		<div id="selectTokenType" class="easyui-window" title="房间类型选择" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:700px;height:400px;">
			<table id="tokenTypeTable" class="easyui-datagrid" title="手牌类型列表" style="width:700px;height:250px;"
 			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb', border:false,singleSelect:true,
 					fit:true,fitColumns:true,pagination:true,url:'../tokenType/queryTokenType.do',onClickRow:function(rowIndex, rowData){
	 						$('#token_type_name').val(rowData.token_type_name);
	 						$('#token_type_id').val(rowData.id);
	 						$('#selectTokenType').window('close');
	 				}">
			<thead>
				<tr>
					<th data-options="field:'token_type_name',width:80,align:'center'">手牌类型名称</th>
					<th data-options="field:'productName',width:120,align:'center'">绑定商品名称</th>
					<th data-options="field:'productNo',width:120,align:'center'">绑定商品编码</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding:5px;height:auto">
			<form id="queryTokenTypeForm" name="queryTokenTypeForm" action="queryTokenType" method="post">
			<div>
				手牌类型名称: <input class="easyui-validatebox" name="tokenTypeName" id="tokenTypeName" style="width:80px">
				&nbsp;&nbsp;&nbsp;&nbsp;
				商品编号: <input class="easyui-validatebox" name="productNo" id="productNo" style="width:80px">
				&nbsp;&nbsp;&nbsp;&nbsp;                          
				商品名称: <input class="easyui-validatebox" name="productName" id="productName" style="width:80px">
				&nbsp;&nbsp;
				<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
				<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
			</div>
			</form>
		</div>
	</body>
</html>